<template>
  <!-- 导航栏 -->
  <appNav></appNav>

  <!-- 头部 -->
  <appHead></appHead>

  <!-- 2.2 固定头部布局-->
  <AppHeaderSticky />

  <!-- 内容 -->
  <main class="app-body">
    <!-- 二级路由 -->
    <router-view v-slot="{ Component }" v-if="!isReload">
      <keep-alive :include="['xtx-home-page','SubCategory']">
        <component :is="Component" />
      </keep-alive>
    </router-view>
    <!-- <router-view></router-view> -->
  </main>

  <!-- 底部 -->
  <appFoot></appFoot>
</template>

<script>
import appNav from "@/components/layoutComponents/app-topnav.vue";
import appHead from "@/components/layoutComponents/app-header.vue";
import appFoot from "@/components/layoutComponents/app-footer.vue";
import AppHeaderSticky from "@/components/layoutComponents/app-header-sticky.vue";
import { useStore } from "vuex";
import { nextTick, provide, ref } from 'vue';
export default {
  name: "xtx-layout",
  components: {
    appNav,
    appHead,
    appFoot,
    AppHeaderSticky
  },
  setup() {
    const store = useStore();
    store.dispatch("category/getList");

    // 热重载
    const isReload = ref(false)
    const reloadApp = () => {
      isReload.value = true
      nextTick(() => {
        isReload.value = false
      })
    }
    provide('reloadApp', reloadApp)
    return {
      isReload
    }
  }
};
</script>

<style scoped lang="less">
.app-body {
  min-height: 1600px;
}
</style>
